<template>
  <div>
    <el-dialog
      @close="
        () => {
          this.$emit('close');
        }
      "
      width="60%"
      title="个人权限"
      :visible.sync="dialogVisible"
    >
      <el-row
        v-for="(one, index) in permissionList"
        :key="index"
        :class="
          index === 0
            ? ['vcenter', 'bdbottom', 'bdtop']
            : ['vcenter', 'bdbottom']
        "
      >
        <!-- 渲染一级权限 -->
        <el-col :span="5">
          <el-row
            ><el-tag>{{ one.remarks }}</el-tag
            ><i class="el-icon-caret-right"></i
          ></el-row>
        </el-col>
        <el-col :span="19">
          <!-- 渲染二级权限 -->
          <el-row
            v-for="(two,index2) in one.childPermission"
            :key="index2"
            :class="['vcenter', 'bdheight']"
          >
            <el-col :span="6">
              <el-tag type="success">
                {{ two.remarks }}
              </el-tag>
              <i class="el-icon-caret-right"></i>
            </el-col>
            <!-- 渲染三级权限 -->
            <el-col :span="18">
              <div
                style="display: inline-block"
                v-for="(three,index3) in two.childPermission"
                :key="index3"
              >
                <el-tooltip
                  :disabled="three.childPermission.length <= 0"
                  content="点击查看4级权限"
                  placement="top"
                  effect="light"
                >
                  <el-tag
                    @click="getLevelFourInfo(three)"
                    style="margin: 5px 5px"
                    :class="
                      three.childPermission.length > 0
                        ? ['el-icon-zoom-in', 'threeClass']
                        : ''
                    "
                    :type="
                      three.childPermission.length > 0 ? 'primary' : 'warning'
                    "
                    v-if="three.childPermission"
                  >
                    {{ three.remarks }}
                  </el-tag>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-dialog
        width="30%"
        title="四级权限"
        :visible.sync="sonVisible"
        append-to-body
      >
        <el-row :gutter="30" style="display: flex; align-items: center">
          <el-col :span="9">
            <el-tag
              >{{ levelFourInfo.remarks }}
              <i class="el-icon-caret-right"></i>
            </el-tag>
          </el-col>
          <el-col :span="14">
            <el-row
              :key="item.id"
              v-for="item in levelFourInfo.childPermission"
            >
              <el-col :span="24" style="margin-bottom: 10px">
                <el-tag type="success">
                  {{ item.remarks }}
                </el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "PersonalAuthority",
  props: {
    permissionVisible: {
      type: Boolean,
    },
  },
  data() {
    return {
      sonVisible: false, //四级权限面板
      //四级权限信息
      levelFourInfo: {},
    };
  },
  computed: {
    ...mapState({
      permissionList: (state) => state.roleInfo.userPermissions,
    }),
    dialogVisible: {
      get(){
        return this.permissionVisible;
      },
      set(){
        this.$emit('close');
      }
    },
  },
  methods: {
    //获取四级权限信息
    getLevelFourInfo(info) {
      if (info.childPermission.length <= 0) {
        return;
      }
      this.levelFourInfo = info;
      this.sonVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.vcenter {
  display: flex;
  align-items: center;
}

.bdbottom {
  border-bottom: 1px dashed #ccc;
}
.bdtop {
  border-top: 1px dashed #ccc;
  padding-top: 20px;
}
.bdheight {
  height: 90px;
}

.threeClass:hover {
  cursor: pointer;
}
</style>>
